<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="首贷公司" prop="applyCompanyList">
            <el-checkbox-group v-model="form.applyCompanyList">
              <el-checkbox v-for="item in companyList" :label="item.id" size="small">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="首贷模式" prop="firstApplyType">
            <el-radio-group v-model="form.firstApplyType">
              <el-radio-button label="0">
                随机
              </el-radio-button>
              <el-radio-button label="1">
                轮询
              </el-radio-button>
              <el-radio-button label="2">
                所有
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="h5域名" prop="frontUrl">
            <el-input v-model="form.frontUrl" style="width: 300px"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="是否开启渠道判断" prop="openChannel">
            <el-radio-group v-model="form.openChannel">
              <el-radio
                v-for="item in statusList"
                :key="item.value"
                :label="item.value"
              >{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="提现过期天数" prop="frontUrl">
            <el-input v-model="form.withdrawalExpireDay" oninput="value = value.replace(/[^\d]/g,'')"  style="width: 300px">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </div>
</template>

<script>
  import {getDetail, addConfig, updateConfig} from "@/api/app/config";
  import {list} from "@/api/company";

  export default {
    name: "AppConfig",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表单参数
        form: {
          applyCompanyList: [],
          firstApplyType: 0,
          frontUrl: undefined,
          openChannel: undefined,
          withdrawalExpireDay: 0
        },
        companyList: [],
        statusList: [
          {
            name: '否',
            value: '0'
          },
          {
            name: '是',
            value: '1'
          }
        ],
        // 表单校验
        rules: {
          firstApplyCompany: [
            {required: true, message: "首贷公司不能为空", trigger: "blur"},
          ],
          firstApplyType: [
            {required: true, message: "首贷模式不能为空", trigger: "blur"},
          ]
        }
      };
    },

    created() {
      this.getCompanyList();
      this.getDetail();
    },
    methods: {
      /** 查询用户列表 */
      getDetail() {
        this.loading = true;
        getDetail().then(response => {
            if (response.data) {
              this.form = response.data;
            }
          }
        );
      },

      getCompanyList() {
        list().then(response => {
            this.companyList = response.data;
          }
        );
      },


      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },


      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateConfig(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getDetail();
              });
            } else {
              addConfig(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getDetail();
              });
            }
          }
        });
      },
    }
  };
</script>
